<!-- 标签创建类型 -->
<template>
  <el-dialog
    class="dialogAdapter"
    :destroy-on-close="true"
    style="border-radius: 10px"
    @close="handleClose"
    v-model="props.visible"
    :title="`${!type ? '创建' : '编辑'}标签`"
  >
    <!--from -->
    <el-form ref="ruleFormRef" :model="d.form" label-position="top">
      <el-form-item prop="label" label="标签名" :rules="[{ required: true, message: '请输入标签名' }]">
        <el-input v-model="d.form.label" autocomplete="off" placeholder="请输入标签名" />
      </el-form-item>
      <el-form-item label="请选择父类" prop="fid">
        <el-select @visible-change="handleVisibleChange" v-model="d.form.fid" style="width: 100%">
          <el-option label="不选择父类" :value="0" />
          <el-option v-for="(item, index) in d.option" :key="index" :label="item.label" :value="item.value" />
        </el-select>
      </el-form-item>
      <!-- 
      <el-form-item label="简介">
        <el-input v-model="d.form.info" type="textarea" placeholder="请输入简介" />
      </el-form-item> -->
    </el-form>

    <template #footer>
      <span class="dialog-footer">
        <el-button @click="handleClose">取消</el-button>
        <el-button v-if="!type" type="danger" @click="submitForm(ruleFormRef)"> 创建 </el-button>
        <el-button v-else type="danger" @click="submitEditForm(ruleFormRef)"> 编辑 </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import { APIVoiceUp } from "@/api/ApiSpeechModel"
import { ElMessage, FormInstance } from "element-plus"
import { onMounted, reactive, ref } from "vue"
// @ts-ignore
import { APILabelAdd } from "@/api/apiSetting"
import debounce from "@/utils/debounce"
import pubsub from "pubsub-js"
import { APILabelList } from "@/api/apiSetting"

interface Props {
  editData?: any
  type?: string
  visible: boolean
}

const emits = defineEmits(["editDpData", "close"])
const props = defineProps<Props>()
const ruleFormRef = ref()
const loading = ref<boolean>(false)

// 云模型from
const d = reactive({
  form: {
    label: "",
    fid: 0
  },
  paginationData: {
    total: 0,
    currentPage: 1,
    pageSize: 20
  },
  option: [] as any
})

const handleVisibleChange = (visible: boolean) => {
  if (visible) {
    // 如果下拉框显示
    const selectDropdown = document.querySelector(".el-select-dropdown__wrap")
    // 监听下拉框滚动事件
    selectDropdown && selectDropdown.addEventListener("scroll", loadNextPage)
  } else {
    // 如果下拉框隐藏
    const selectDropdown = document.querySelector(".el-select-dropdown__wrap")
    // 移除下拉框滚动事件监听
    selectDropdown && selectDropdown.removeEventListener("scroll", loadNextPage)
  }
}
const loadNextPage = () => {
  const selectDropdown = document.querySelector(".el-select-dropdown__wrap")
  // 判断下拉框是否触底
  if (selectDropdown && selectDropdown.scrollTop + selectDropdown.offsetHeight >= selectDropdown.scrollHeight) {
    // 触底加载下一页数据
    // 调用接口请求下一页数据
    // ...
    if (d.paginationData.total !== d.option.length) {
      //总条数等于当前返回条数
      d.paginationData.currentPage++
      initModel()
    }
  }
}
// 初始化
const initModel = async () => {
  loading.value = true
  const params = {
    page: d.paginationData.currentPage
  }
  const { data, code } = await APILabelList(params)
  if (code !== 200) return
  d.paginationData.total = data.count
  const list = data.list.map((item: any) => {
    return {
      value: item.id,
      label: item.label
    }
  })
  d.option = d.option.concat(list)
  loading.value = false
}

// 清空数据
const dfData = {
  label: ""
}

onMounted(() => {
  initModel()
  if (props.editData && props.type) {
    d.form = props.editData
  }
})

// 创建提交
const submitForm = debounce((formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.validate(async (valid) => {
    if (valid) {
      const { code } = await APILabelAdd(d.form)
      if (code === 200) {
        pubsub.publish("UPDATETAGSLLIST")
        handleClose()
        ElMessage({
          type: "success",
          message: "添加成功"
        })
        d.form = dfData
      }
    } else {
      console.log("error submit!")

      return false
    }
  })
}, 300)

const handleClose = () => {
  emits("close")
}
// 编辑提交
const submitEditForm = debounce((formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.validate(async (valid) => {
    if (valid) {
      console.log(valid, d.form, "submit!")
      const { code, data } = await APIVoiceUp(d.form)
      if (code === 200) {
        emits("editDpData", { ...d.form, ...data })
      }
    } else {
      console.log("error submit!")
      return false
    }
  })
}, 300)
</script>
<style lang="scss" scoped></style>
